import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col, message, Tooltip } from 'antd';
import List from './list';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from 'src/components/FilterTool';
import CodeLabel from 'src/components/CodeLabel';
import Add from '../add';
import { modes } from 'codemirror';

function mapStateToProps(state) {
  return {
    strategy_type: state.code.strategy_type || [],
    modes: state.code.strategy_mode || [],
  };
}

@connect(mapStateToProps)
class StrategySimpleComponent extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'strategyUsablePage';
    this.editComponent = Add;
    this.listsComponent = List;
    this.state = {
      ...this.state,
      riskTypes: [],
      columns: [],
      dataIndex: 'strategy_type',
      selectedRowKeys: props.strategy_id ? [props.strategy_id] : [],
      currentEventId: '',
      selectedRows: [],
    };
    if (props.strategy_mode && this.props.isLimitMode) {
      this.queryTableParams.mode = props.strategy_mode;
    }
    this.queryTableParams.projectCode = props.projectCode;
    this.initQueryTableParams = { ...this.queryTableParams };
    this.defaultParams = {};
    this.queryParams = { ...this.defaultParams };
  }
  componentDidMount() {
    // this.getAppCodeList();
  }

  // 重置筛选项
  resetList = () => {
    this.queryPanigation = Object.assign({}, this.initQueryPanigation);
    this.queryTableParams = Object.assign(this.initQueryTableParams);
  };

  refreshFilter = (params, type) => {
    this.queryParams = { ...params, ...this.defaultParams };
    if (type === false) return;
    this.freshQueryList();
  };

  // 表列定义
  getColumns = () => {
    return [
      {
        title: '组件名称',
        key: 'name',
        dataIndex: 'name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
        ellipsis: true,
      },

      {
        title: (
          <>
            {this.getFilterTitle(
              '组件模式',
              this.props.modes,
              'mode',
              this.refreshTableFilterWithApp,
              ['key', 'value'],
              this.props.isLimitMode ? true : false,
            )}
          </>
        ),
        key: 'mode',
        dataIndex: 'mode',

        render: (text) => {
          const val = this.props.modes.map((it) => {
            if (it.key === text) {
              return it.value;
            }
          });
          return (
            <Tooltip title={val}>
              <span>{val}</span>
            </Tooltip>
          );
        },
      },

      {
        title: '版本',
        key: 'version',
        width: 60,
        dataIndex: 'version',
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={`${record.createBy}/${record.updateBy}`}>
              <div className='overflowtext'>{`${record.createBy}/${record.updateBy}`}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'updateAt',
        dataIndex: 'updateBy',
        width: 200,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '80%' }}>
                {text}
              </div>
            </Tooltip>
          );
        },
      },
    ];
  };

  okHandle = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length > 0) {
      if (this.props.onOkHandle) {
        this.props.onOkHandle(selectedRowKeys[0]);
      }
    } else {
      message.warning('请至少选择一个策略组件');
    }
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入组件名|创建人|修改人进行搜索',
      },
    ];
    // 字段选择配置
    const rowSelection = {
      columnWidth: 30,
      type: 'radio',
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRowKeys: selectedRowKeys,
          selectedRows: selectedRows,
        });
      },
      selectedRowKeys: this.state.selectedRowKeys,
    };
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={12} />
          <Col span={12}>
            {this.props.strategy_type && (
              <FilterTool
                ref='filterTool'
                data={data}
                colNum={1}
                query={this.freshQueryList}
                refreshFilter={this.refreshFilter}
                isOnChange={true}
                refresh={this.resetList}
                justify='end'
              />
            )}
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px', padding: '12px' }}>
          <ListsComponent
            rowSelection={rowSelection}
            {...this.state}
            {...this.props}
            edit={this.edit}
            onChangePagination={this.onChangePagination}
            showDetail={this.showDetail}
            copy={this.copy}
            defaultColumns={this.state.defaultColumns}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            rowKey='id'
          />
        </div>
        <div className='form-btn'>
          <Button type='primary' onClick={() => this.okHandle()} className='login-form-button' autoFocus={true}>
            确定
          </Button>
          <Button className='login-form-button' onClick={() => this.props.closeModal()}>
            取消
          </Button>
        </div>
      </div>
    );
  }
}

export default StrategySimpleComponent;
